<template>
    <div class="app-container machineContainer">
        <div class="customContainer">
            <el-button class="pull-right" type="primary" size="small" @click="addEditClick()">新增兑币机</el-button>
            <!--品牌-门店-区域-搜索 -->
            <dj-search-bsa ref="search" @fetchData="fetchData" categoryId="310"></dj-search-bsa>
            <!-- 列表 -->
            <el-table  highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" label="机台区域" prop="area_name" width="80"></el-table-column>
                <el-table-column align="center" label='机台编号' prop="no"></el-table-column>
                <el-table-column align="center" label='机台名称' prop="name"></el-table-column>
                <el-table-column align="center" label="所属门店" prop="store_name"></el-table-column>
                <!-- 列表的操作按钮 -->
                <el-table-column align="center" label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button @click="delClick(scope.row.id,scope.$index)" type="danger" icon="el-icon-delete"
                            size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 弹框 -->
            <el-dialog :close-on-click-modal="false"  title="新增兑币机" :visible.sync="addEditDialog" @close="callOf('saveForm')">
                <el-form class="dialogInContainer" v-loading="dialogLoading" :model="saveForm" :inline="true" ref="saveForm"
                    :rules="rules" style="width:620px;margin:0 auto;">
                    <el-form-item label="子品牌　" prop="brand_id">
                        <el-select v-model="saveForm.brand_id" placeholder="子品牌" @change="brandChange">
                            <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属门店" class="pull-right" prop="store_id">
                        <el-select filterable v-model="saveForm.store_id" placeholder="请选择门店" @change="storeChange">
                            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机台名称" prop="name">
                        <el-input v-model="saveForm.name" class="w200"></el-input>
                    </el-form-item>
                    <el-form-item label="所属区域" class="pull-right" prop="area_id">
                        <el-select v-model="saveForm.area_id" placeholder="请选择区域">
                            <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机台编号" prop="no">
                        <el-input onkeypress="return event.which>=48&&event.which<=57" type="number"  onmousewheel="return false;" v-model="saveForm.no"
                            class="w200"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" type="primary" @click="saveClick('saveForm')">确认添加</el-button>
                    &nbsp;
                </div>
            </el-dialog>
        </div>

        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                :page-size="20" layout="prev, pager, next, jumper" :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        getList,
        getPage,
        del,
        getStore,
        getArea,
        getBrand,
        save,
    } from "@/api/information/coin_machine_info";
    export default {
        data() {
            return {
                dialogLoading: false,
                list: null,
                ok: false,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 0,
                brandList: null,
                storeList: null,
                areaList: null,
                formInline: {
                    org: "",
                    brand: "",
                    category_id: 310
                },
                saveForm: {
                    brand_id: '',
                    store_id: '',
                    area_id: '',
                    name: '',
                    no: '',
                },
                rules: {
                    brand_id: [
                        { required: true, message: '请选择品牌', trigger: 'change' }
                    ],
                    store_id: [
                        { required: true, message: '请选择门店', trigger: 'change' }
                    ],
                    area_id: [
                        { required: true, message: '请选择区域', trigger: 'change' }
                    ],
                    no: [
                        { required: true, message: '请输入机台编号', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入兑币机名称', trigger: 'blur' }
                    ],
                },
                addEditDialog: false,
            };
        },
        created() {
            this.getBrandList();
        },
        methods: {
            // 提交
            saveClick(formName, addClevice) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        save(this.saveForm).then(response => {
                            if (response.code == 1) {
                                this.fetchData(this.formInline);
                                this.addEditDialog = false;
                            }
                        });
                    }
                });
            },
            // 编辑和新增方法
            addEditClick(id, index) {
                this.addEditDialog = true;
            },
            getBrandList() {
                getBrand({ org: 1, category_id: 310 }).then(response => {
                    this.brandList = response;
                });
            },
            brandChange() {
                this.saveForm.store_id = '';
                this.saveForm.area_id = '';
                getStore({ brand: this.saveForm.brand_id, category_id: 310 }).then(response => {
                    this.storeList = response;
                });
            },
            storeChange() {
                this.saveForm.area_id = '';
                getArea({ sid: this.saveForm.store_id, category_id: 310 }).then(response => {
                    this.areaList = response
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            delClick(id, index) {
                const text = this.ok ? '移除该兑币机后，上次结业至今时间段内该机台日报数据不予保留。' : '是否移除兑币机?'
                this.$confirm(text, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                    del({ id: id }).then(response => {
                        if (response.code == 1) {
                            this.list.splice(index, 1);
                            this.$message({ type: 'success', message: response.message });
                        }
                    });
                })
            },
            // 列表获取
            fetchData(data) {
                this.formInline = data;
                this.currentPage = 1;
                this.listLoading = true;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response * 20;
                    getList(this.formInline).then(response => {
                        this.list = response.list;
                        this.ok = response.ok == 0 ? true : false;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            // 分页
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response.list;
                    this.ok = response.ok == 0 ? true : false;
                    this.listLoading = false;
                });
            },
            //关闭弹框重置
            callOf(formName) {
                this.addEditDialog = false;
                this.$refs[formName].resetFields();
            },
        }
    };
</script>
<style>
    .machineContainer .el-dialog {
        width: 660px
    }
</style>